<template>
	<cu-page-base :nav-bar-options="navBarOptions" @clickNavBarLeft="goBack">
		<view class="cu-w-100 cu-px-20 cu-pt-30">
			<block v-if="wordsStore.list.length === 0">
				<view class="cu-w-100">
					<cu-empty icon="data" text="没有数据，赶紧签到吧！"></cu-empty>
				</view>
			</block>
			<block v-else>
				<view class="cu-w-100">
					<block v-for="(item,idx) in wordsStore.list">
						<view class="cu-w-100 cu-mt-20">
							<uni-section :key="idx" :title="item.type | sliceType" type="line">
								<view class="cu-w-100 cu-mt-20 cu-font cu-d-flex cu-j-sb cu-a-stretch cu-flex-column">
									<view>来源：{{item.source | sourceType}}</view>
									<view>字符数：{{item.words}}</view>
									<view>已使用：{{item.used}}</view>
									<view>{{item.source | sourceType}}时间：{{item.create_date | dateFormat}}</view>
									<view>过期时间：{{item.expire_date | dateFormat}}</view>
								</view>
							</uni-section>
						</view>
					</block>

					<view class="cu-w-100 cu-py-40">
						<u-divider text-size="28" lineColor="#2f2f30" :text="wordsStore.hasNext ? '加载更多' : '没有更多了'"
							:dashed="true"></u-divider>
					</view>
				</view>
			</block>
		</view>
	</cu-page-base>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import commMiXin from '@/common/mixin/common-mixin.js';
	const moment = require('@/store/utils/node_modules/moment');
	export default {
		mixins: [commMiXin],
		computed: {
			...mapState({
				wordsStore: state => state.wordsStore,
				loginStore: state => state.loginStore,
			})
		},
		filters: {
			sliceType(val) {
				let type = val;
				switch (val) {
					case "text2audio":
						type = "文字转语音字符包";
						break;
					default:
				}
				return type;
			},
			dateFormat(val) {
				return moment(val).format("YYYY-MM-DD HH:mm:ss");
			},
			sourceType(val) {
				let type = val;
				switch (val) {
					case 1:
						type = "注册赠与";
						break;
					case 2:
						type = "兑换";
						break;
					case 9:
						type = "购买";
						break;
					default:
						
				}
				return type;
			},
		},
		data() {
			return {
				navBarOptions: {
					title: "我的字符包",
					leftText: "返回",
					leftIcon: "back",
				},
				pageNum: 10,
			};
		},
		async onLoad() {
			await this.$store.dispatch('wordsStore/clear');
			this.getPageData()
		},
		methods: {
			goBack(data) {
				this.gotoPage(1, 'navigateBack');
			},
			async getPageData() {
				await this.$store.dispatch('wordsStore/getList', {
					uid: this.loginStore.userinfo._id,
					type: "text2audio",
					start: this.wordsStore.list.length,
					page: this.pageNum,
				});
			},
			// 触底的事件
			onReachBottom() {
				this.getPageData()
			},
		}
	}
</script>

<style lang="scss">
	.uni-section-content {
		padding: 10px;
	}
</style>